import React, { Component } from "react";
import "./index.scss";
import Button from "../../../component/button/index";
import yhTools from "../../../tools/yh";
import Notice from "@component/notice/notice";
import { connect } from "react-redux";

const camera = require("../../../images/icon/liveness/camera.png");

const remindImgList = [];
["", "", "", ""].map((item, index) =>
	remindImgList.push(require(`../../../images/icon/liveness/${index + 1}.png`))
);

@connect(state => ({
	bonusStr: state.bankReducer.bonusStr
}))
class xhfLiveness extends Component {
	constructor(props) {
		super(props);
		this.state = {};
	}
	componentDidMount() {}
	startLive = () => {
		console.log("011111");
		this.props.onClick();
	};
	checkFaceAgreement = e => {
		e.stopPropagation();
		this.props.history.push("/faceAgreement");
	};
	render() {
		const { bonusStr } = this.props;
		return (
			<div className="liveness-wrapper">
				{bonusStr && <Notice noticeContent={bonusStr} />}
				{yhTools.isXiaoHuiFu() && (
					<div className="progress-container">
						<p className="progress-title">
							已填写 <em>90%</em> 最高5万元信用额度
						</p>
						<div className="progress-bg">
							<span className="progress-line"></span>
						</div>
					</div>
				)}
				<div className="bg-white">
					<p
						className="remind"
						style={{
							background: "rgba(246,246,246,1)",
							paddingTop: "0",
							lineHeight: "0.76rem"
						}}
					>
						为了保障您的信息安全，需要进行人脸识别验证
					</p>
					<img src={camera} alt="摄像头" className="icon" />
					<div className="image-require">
						<div className="line-div" />
						<div className="line-div image_require-tip">人脸识别拍摄示例</div>
						<div className="line-div" />
					</div>
					<div className="img-list">
						{remindImgList.map((item, index) => (
							<div style={{ width: "22%" }} key={index}>
								<div
									className="code"
									style={{
										width: "100%",
										height: 0,
										paddingBottom: "92.5%",
										background: `url(${item})`,
										backgroundSize: "cover"
									}}
								/>
							</div>
						))}
					</div>
				</div>

				<div className="agree-wrapper">
					<a className="huise">查看</a>
					<a className="xieyi" onClick={this.props.checkFaceAgreement}>
						《人像识别协议》
					</a>
				</div>
				<Button
					onClick={this.startLive}
					buttonStyle={{
						height: "1rem",
						lineHeight: "1rem"
					}}
				>
					同意协议并验证
				</Button>
			</div>
		);
	}
}

export default xhfLiveness;
